
---
import AsideItem from "@components/common/aside/AsideItem.astro";
import AsideTitle from "@components/common/aside/AsideTitle.astro";
---
<!-- 热门文章列表 -->
<AsideItem>
  <AsideTitle itemTitle="热门文章" >
    <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-6 h-6 mb-2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"
        ></path>
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"
        ></path>
      </svg>
  </AsideTitle>
  <th:block th:with="articleList=${@articleCountSortTag.listArticlesVoByType(1,10,'ARTICLE',themeName,'TOP','DESC')}" ></th:block>
  <div class="overflow-hidden my-2 rounded-lg group relative" th:each="article : ${articleList}">
    <a th:href="${webConfig['oly.web.domain']+'/article/'+article.articleId}" class="group relative block" th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/nice/static/images/thumbs/}">
      <img
        class="h-40 w-full transition ease-in-out delay-150  group-hover:-translate-y-1 group-hover:scale-110  duration-300"
        th:src="${(imgs==null)?iul+rando+'.jpg':(imgPrefix+imgs[0])}"
        src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
      />
      <div class="w-full h-full  absolute top-0 bg-slate-700/0 max-lg:bg-slate-700/60 transition-bg   group-hover:bg-slate-700/60 duration-1000">
        <div class="max-w-sm p-2 rounded-lg shadow-sm ">
          <a href="#">
              <h3 class="mb-2 font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h3>
          </a>
          <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so </p>
          <a href="#" class="inline-flex items-center  py-2 text-sm font-medium text-center text-white focus:ring-4 focus:outline-none focus:ring-blue-300">
              Read more
              <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
              </svg>
          </a>
        </div>
     </div> 
    </a>
  </div>
  </th:block>
</AsideItem>


